<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="showDrawer"
    :direction="direction"
    :title="title"
    :with-header="withHeader"
    :destroy-on-close="destroyOnClose"
    :close-on-click-modal="closeOnClickModal"
    :before-close="handleOut"
    :size="size"
  >
    <!-- 内容区 -->
    <div class="formDrawer">
      <div class="body">
        <slot></slot>
      </div>
      <!-- 底部操作按钮 -->
      <div class="actions">
        <el-button type="primary" @click="submit" :loading="loading">
          {{ comfirmText }}
        </el-button>
        <el-button type="default" @click="close"> 取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { dialog } from '@/composables/util'

const showDrawer = ref(false)
// 封装属性
const props = defineProps({
  title: String,
  // 抽屉大小
  size: {
    type: String,
    default: '45%'
  },
  // 控制是否显示 header 栏,
  withHeader: {
    type: Boolean,
    default: true
  },
  // 控制是否在关闭 Drawer 之后将子元素全部销毁
  destroyOnClose: {
    type: Boolean,
    default: true
  },
  // 是否可以通过点击 modal 关闭 Drawer
  closeOnClickModal: {
    type: Boolean,
    default: true
  },
  // 确定按钮的文字
  comfirmText: {
    type: String,
    default: '提交'
  },
  // 打开方向
  direction: {
    type: String,
    default: 'ttb' // 'rtl' | 'ltr' | 'ttb' | 'btt'
  }
})
// 退出抽屉弹框
const handleOut = done => {
  dialog('确认要退出吗?', '提示', 'warning').then(() => {
    done()
  })
}
// 打开
const open = () => (showDrawer.value = true)
// 关闭
const close = () => {
  showDrawer.value = false
}
// 提交
const emit = defineEmits(['submit'])
const submit = () => emit('submit')
// loading加载
const loading = ref(false)
const showLoading = () => {
  loading.value = true
}
const hideLoading = () => {
  loading.value = false
}

// 向父组件暴露以下方法
defineExpose({
  open,
  close,
  showLoading,
  hideLoading
})
</script>

<style lang="scss" scoped>
.formDrawer {
  @apply flex flex-col w-[100%] h-[100%];
  position: relative;
  .body {
    flex: 1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto; //  内容区域超出高度实现滚动
  }
  .actions {
    z-index: 100;
    height: 80px;
    @apply flex justify-center mt-auto;
  }
}
</style>
